<!--
 * @Description: 设备信息
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-25 10:03:56
 * @LastEditTime: 2021-11-19 12:21:19
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="device-boxs">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="device device-info">
          <div class="title">
            <i
              class="iconfont"
              style="color: #95DE64; background: rgba(149, 222, 100, 0.15)"
            >&#xe6b2;</i>
            设备信息
            <el-button
              type="text"
              @click="dpiTop"
              style="position: absolute;right: 2%;top: 0;"
            >DPI应用</el-button>
          </div>
          <div class="content" style="overflow: auto; height: 183px;">
            <table>
              <tr>
                <td>
                  <template v-if="info.neLayer === 'Access'">
                    <img src="/static/images/cpe.png" />
                  </template>
                  <template v-else>
                    <img src="/static/images/pop.png" />
                  </template>
                  <div v-show="info.managementState === 'ONLINE'">
                    <span v-if="info.connectionState === 'CONNECTED'">
                      <i class="i-success"></i>
                      链接
                    </span>
                    <span v-if="info.connectionState === 'DISCONNECTED'">
                      <i class="i-error"></i>
                      断链
                    </span>
                  </div>
                  <span v-show="info.connectionState === 'UNKNOWN'">
                    <i class="i-warning"></i>
                    未知
                  </span>
                </td>
              </tr>
              <tr>
                <td>
                  <i class="el-icon-postcard"></i> 名称
                </td>
                <td>{{info.userlabel}}</td>
              </tr>
              <tr>
                <td>
                  <i class="el-icon-collection-tag"></i> 类型
                </td>
                <td>{{info.typeLabel}}</td>
              </tr>
              <tr>
                <td>
                  <i class="el-icon-school"></i> 租户
                </td>
                <td v-if="info.extAttrs">{{info.extAttrs.dgName}}</td>
              </tr>
              <tr>
                <td>
                  <i class="el-icon-office-building"></i> 站点
                </td>
                <td
                  v-if="info.extAttrs && info.extAttrs.siteId !== undefined && info.extAttrs.siteId !== -1"
                >{{info.extAttrs.site.sitename}}</td>
                <td v-else>-</td>
              </tr>
              <tr>
                <td>IP</td>
                <td>{{info.ipAddress}}</td>
              </tr>
              <tr>
                <td>软件SN</td>
                <td v-if="info.extAttrs && info.extAttrs.esn">{{info.extAttrs.esn | filterSN}}</td>
                <td v-else>-</td>
              </tr>
              <tr
                style="display: block; float: right; width: calc(100% - 140px); margin-bottom: 3px;"
              >
                <td>软件版本</td>
                <td>{{neType.software}}</td>
              </tr>
              <tr style="display: block; float: right; width: calc(100% - 140px);">
                <td>硬件版本</td>
                <td>{{neType.hardware}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="10">
        <div class="device device-performance">
          <div class="title">
            <i class="iconfont" style="color: #7E3AD5; background: rgba(249, 240, 255, 1)">&#xe817;</i> 性能参数
            <el-button
              type="text"
              @click="logHistorys"
              style="position: absolute;right: 2%;top: 0;"
            >历史监控</el-button>
          </div>
          <div class="content">
            <ul>
              <li>
                <i class="iconfont icon-cpu"></i>
                <span v-if="info.connectionState === 'DISCONNECTED' || chart.cpu === 0">-</span>
                <span v-if="chart.cpu >= 90" style="color: #ed4014;">{{chart.cpu}} %</span>
                <span
                  v-if="chart.cpu < 90 && chart.cpu >= 75"
                  style="color: #e9b424;"
                >{{chart.cpu}} %</span>
                <span v-if="chart.cpu < 75 && chart.cpu > 0" style="color: #19be6b;">{{chart.cpu}} %</span>
                <label>CPU</label>
              </li>
              <li>
                <i class="iconfont icon-memory"></i>
                <span v-if="info.connectionState === 'DISCONNECTED' || chart.memory === 0">-</span>
                <span v-if="chart.memory >= 90" style="color: #ed4014;">{{chart.memory}} %</span>
                <span
                  v-if="chart.memory < 90 && chart.memory >= 75"
                  style="color: #e9b424;"
                >{{chart.memory}} %</span>
                <span
                  v-if="chart.memory < 75 && chart.memory > 0"
                  style="color: #19be6b;"
                >{{chart.memory}} %</span>
                <label>内存</label>
              </li>
              <li>
                <i class="iconfont icon-nav-asset-monitor"></i>
                <span v-if="info.connectionState === 'DISCONNECTED' || chart.wd === 0">-</span>
                <span v-if="chart.wd >= 90" style="color: #ed4014;">{{chart.wd}} ℃</span>
                <span v-if="chart.wd < 90 && chart.wd >= 75" style="color: #e9b424;">{{chart.wd}} ℃</span>
                <span v-if="chart.wd < 75 && chart.wd > 0" style="color: #19be6b;">{{chart.wd}} ℃</span>
                <label>温度</label>
              </li>
              <li>
                <i class="iconfont icon-port"></i>
                <span
                  v-if="info.extAttrs && info.extAttrs.siteId !== undefined && info.extAttrs.siteId !== -1"
                >{{ info | filtersPort(neId) }}</span>
                <span v-else>0</span>
                <label>端口</label>
              </li>
              <li>
                <i class="iconfont icon-alter"></i>
                <span v-if="info.extAttrs">{{info.extAttrs.links.length}}</span>
                <label>隧道</label>
              </li>
              <li>
                <i class="iconfont icon-app"></i>
                <span v-if="info.extAttrs">{{info.extAttrs.acls.length}}</span>
                <label>应用</label>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="device device-alarm">
          <div class="title">
            <i
              class="iconfont"
              style="color: #FF9592; background: rgba(242, 109, 91, 0.15)"
            >&#xe72c;</i> 告警信息
          </div>
          <div class="content">
            <ul>
              <li>
                <span>{{info.extAttrs.alarmCounts.Critical}}</span>
                <label>
                  <i class="i-yz"></i> 严重
                </label>
              </li>
              <li>
                <span>{{info.extAttrs.alarmCounts.Major}}</span>
                <label>
                  <i class="i-zy"></i> 主要
                </label>
              </li>
              <li>
                <span>{{info.extAttrs.alarmCounts.Minor}}</span>
                <label>
                  <i class="i-cy"></i> 次要
                </label>
              </li>
              <li>
                <span>{{info.extAttrs.alarmCounts.Warning}}</span>
                <label>
                  <i class="i-jg"></i> 警告
                </label>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24" v-if="ptals.length !== 0">
        <div class="device device-port">
          <div class="title">
            <i
              class="iconfont icon-alter"
              style="color: rgb(24, 144, 255); background: rgb(230, 247, 255);"
            ></i> 端口/隧道/ACL应用
            <!-- <el-button
              v-if="info.neLayer === 'Access'"
              type="text"
              @click="lanTop"
              style="position: absolute;right: 2%;top: 0;"
            >LAN-TOP</el-button>-->
          </div>
          <div class="content">
            <el-tabs v-model="active" type="card" @tab-click="handleClick">
              <el-tab-pane v-for="(item, index) in ptals" :key="index" :name="index">
                <template v-if="item.type === 'lan'">
                  <span slot="label">
                    <i class="iconfont icon-wangluo"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>端口名称</label>
                        <span>{{item.value.toUpperCase()}}</span>
                      </li>
                      <li>
                        <label>端口状态</label>
                        <span>{{item.status ? 'DOWN' : 'UP'}}</span>
                      </li>
                      <li>
                        <label>子接口</label>
                        <span>{{item.vlanOpera}}</span>
                      </li>
                      <li v-show="item.vlanOpera === '开启'">
                        <label>VLAN</label>
                        <span>{{item.vlan}}</span>
                      </li>
                      <li>
                        <label>使用DHCP</label>
                        <span>{{item.enableDhcp}}</span>
                      </li>
                      <template v-if="info.extAttrs.site.ha">
                        <li v-if="item.code === 'ONE'">
                          <label>网关1/掩码</label>
                          <span>{{item.oneGatewayIp}}</span>
                        </li>
                        <li v-if="item.code === 'ONE'">
                          <label>网关1-优先级</label>
                          <span>{{item.oneGatewayPriority}}</span>
                        </li>
                        <li v-if="item.code === 'TWO'">
                          <label>网关2/掩码</label>
                          <span>{{item.twoGatewayIp}}</span>
                        </li>
                        <li v-if="item.code === 'TWO'">
                          <label>网关2-优先级</label>
                          <span>{{item.twoGatewayPriority}}</span>
                        </li>
                      </template>
                      <template v-else>
                        <li>
                          <label>网关/掩码</label>
                          <span>{{item.oneGatewayIp}}</span>
                        </li>
                      </template>
                      <li>
                        <label>地址池</label>
                        <span>{{item.ipPoolFrom}} - {{item.ipPoolTo}}</span>
                      </li>
                      <li>
                        <label>主DNS</label>
                        <span>{{item.primaryDns}}</span>
                      </li>
                      <li>
                        <label>备DNS</label>
                        <span>{{item.backupDns}}</span>
                      </li>
                      <li v-if="!item.status">
                        <label>数据图表</label>
                        <span>
                          <i class="el-icon-data-line" @click="portCharts(item.value, item.vlan)"></i>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
                <template v-if="item.type === 'wifi'">
                  <span slot="label">
                    <i class="iconfont icon-wifi-1"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>端口名称</label>
                        <span>{{item.value.toUpperCase()}}</span>
                      </li>
                      <li>
                        <label>端口状态</label>
                        <span>{{item.status ? 'DOWN' : 'UP'}}</span>
                      </li>
                      <li>
                        <label>子接口</label>
                        <span>{{item.vlanOpera}}</span>
                      </li>
                      <li v-show="item.vlanOpera === '开启'">
                        <label>VLAN</label>
                        <span>{{item.vlan}}</span>
                      </li>
                      <li>
                        <label>使用DHCP</label>
                        <span>{{item.enableDhcp}}</span>
                      </li>
                      <li>
                        <label>网关/掩码</label>
                        <span>{{item.primaryGatewayIp}}</span>
                      </li>
                      <li>
                        <label>地址池</label>
                        <span>{{item.ipPoolFrom}} - {{item.ipPoolTo}}</span>
                      </li>
                      <li>
                        <label>主DNS</label>
                        <span>{{item.primaryDns}}</span>
                      </li>
                      <li>
                        <label>备DNS</label>
                        <span>{{item.backupDns}}</span>
                      </li>
                    </ul>
                  </div>
                </template>
                <template v-if="item.type === 'wan'">
                  <span slot="label">
                    <i class="iconfont icon-wangluo"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>端口名称</label>
                        <span>{{item.value.toUpperCase()}}</span>
                      </li>
                      <li>
                        <label>端口状态</label>
                        <span>{{item.status ? 'DOWN' : 'UP'}}</span>
                      </li>
                      <li>
                        <label>线路类型</label>
                        <span>{{item.lineType === 'INTERNET' ? '因特网' : '专线'}}</span>
                      </li>
                      <li>
                        <label>带宽</label>
                        <span>{{item.bandWidth}}Mbps</span>
                      </li>
                      <li>
                        <label>运营商</label>
                        <span>{{item.netOperator}}</span>
                      </li>
                      <li>
                        <label>优先级</label>
                        <span>{{item.priority === 'HIGH' ? '高' : item.priority === 'CENTER' ? '普通' : '低'}}</span>
                      </li>
                      <li>
                        <label>获取方式</label>
                        <span>{{item.addressAcquisition}}</span>
                      </li>
                      <template v-if="item.addressAcquisition === 'PPPOE'">
                        <li>
                          <label>用户名</label>
                          <span>{{item.userName}}</span>
                        </li>
                        <li>
                          <label>密码</label>
                          <span>{{item.password}}</span>
                        </li>
                      </template>
                      <template
                        v-if="item.addressAcquisition === 'STATIC' || item.addressAcquisition === 'DHCP'"
                      >
                        <li>
                          <label>地址/掩码</label>
                          <span>{{item.ip}}</span>
                        </li>
                        <li>
                          <label>网关地址</label>
                          <span>{{item.gatewayIp}}</span>
                        </li>
                      </template>
                      <li v-if="!item.status">
                        <label>数据图表</label>
                        <span>
                          <i class="el-icon-data-line" @click="portCharts(item.value)"></i>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
                <template v-if="item.type === '4g'">
                  <span slot="label">
                    <i class="iconfont icon-Cellular4G"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>端口名称</label>
                        <span>{{item.value.toUpperCase()}}</span>
                      </li>
                      <li>
                        <label>端口状态</label>
                        <span>{{item.status ? 'DOWN' : 'UP'}}</span>
                      </li>
                      <li>
                        <label>线路类型</label>
                        <span>{{item.lineType === 'INTERNET' ? '因特网' : '专线'}}</span>
                      </li>
                      <li>
                        <label>运营商</label>
                        <span>{{item.netOperator}}</span>
                      </li>
                      <li>
                        <label>优先级</label>
                        <span>{{item.priority === 'HIGH' ? '高' : item.priority === 'CENTER' ? '普通' : '低'}}</span>
                      </li>
                      <li>
                        <label>获取方式</label>
                        <span>{{item.addressAcquisition}}</span>
                      </li>
                      <li>
                        <label>基带版本</label>
                        <span>{{item.version}}</span>
                      </li>
                      <li>
                        <label>设备标识</label>
                        <span>{{item.imei}}</span>
                      </li>
                      <li>
                        <label>网络制式</label>
                        <span>{{item.mode === 'null' ? '-' : item.mode}}</span>
                      </li>
                      <li>
                        <label>网络频段</label>
                        <span>{{item.band === 'null' ? '-' : item.band}}</span>
                      </li>
                      <li>
                        <label>信息强度</label>
                        <span>{{item.rssi === 'null' ? '-' : item.rssi}}</span>
                      </li>
                      <li v-if="!item.status">
                        <label>数据图表</label>
                        <span>
                          <i class="el-icon-data-line" @click="lteCharts(item.value)"></i>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
                <template v-if="item.type === 'tunnel'">
                  <span slot="label">
                    <i class="el-icon-full-screen"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>隧道名称</label>
                        <span>{{item.name}}</span>
                      </li>
                      <li>
                        <label>隧道状态</label>
                        <span>{{item.status ? 'DOWN' : 'UP'}}</span>
                      </li>
                      <li>
                        <label>隧道类型</label>
                        <span>{{item.tunnelType}}</span>
                      </li>
                      <li>
                        <label>优先级</label>
                        <span>{{item.priority === 'HIGH' ? '高' : '低'}}</span>
                      </li>
                      <li>
                        <label>限速</label>
                        <span>{{item.rateLimit === 0 ? '无' : item.rateLimit + 'Mbps'}}</span>
                      </li>
                      <li>
                        <label>源 - 目的</label>
                        <span>{{item.ne}}</span>
                      </li>
                      <li>
                        <label>源端口 - 目的端口</label>
                        <span>{{item.port.toUpperCase()}}</span>
                      </li>
                      <li>
                        <label>数据监控</label>
                        <span>{{item.enableSqa ? '开启' : '关闭'}}</span>
                      </li>
                      <li v-if="!item.status && item.enableSqa">
                        <label>数据图表</label>
                        <span>
                          <i class="el-icon-data-line" @click="tunnelCharts(item.tunnelId)"></i>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
                <template v-if="item.type === 'app'">
                  <span slot="label">
                    <i class="el-icon-receiving"></i>
                    <label>{{item.label}}</label>
                  </span>
                  <div class="port-info">
                    <ul>
                      <li>
                        <label>应用名称</label>
                        <span>{{item.name}}</span>
                      </li>
                      <li>
                        <label>类型</label>
                        <span>IPv4</span>
                      </li>
                      <li>
                        <label>状态</label>
                        <span>{{item.status}}</span>
                      </li>
                      <li>
                        <label>协议</label>
                        <span>{{item.appType}}</span>
                      </li>
                      <li>
                        <label>源端IP</label>
                        <span>{{item.sourceIp}}</span>
                      </li>
                      <li>
                        <label>源端口</label>
                        <span>{{item.sourcePort}}</span>
                      </li>
                      <li>
                        <label>目的端IP</label>
                        <span>{{item.destIp}}</span>
                      </li>
                      <li>
                        <label>目的端口</label>
                        <span>{{item.destPort}}</span>
                      </li>
                      <li v-if="item.status === '开启日志'">
                        <label>数据图表</label>
                        <span>
                          <i class="el-icon-data-line" @click="appCharts(item.id, item)"></i>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <!-- 网元端口监控 -->
      <el-col :xs="24" :sm="24" :lg="24">
        <port
          ref="portChart"
          :neId="neId"
          :name="relPort"
          :vlan="relVlan"
          v-if="chartType === 'port'"
        />
      </el-col>
      <!-- 4G端口监控 -->
      <el-col :xs="24" :sm="24" :lg="24">
        <lte ref="lteChart" :neId="neId" :name="relPort" v-if="chartType === 'lte'" />
      </el-col>
      <!-- 网元隧道监控 -->
      <el-col :xs="24" :sm="24" :lg="24">
        <tunnel ref="tunnelChart" :neId="neId" :name="relPort" v-if="chartType === 'tunnel'" />
      </el-col>
      <!-- 网元应用监控 -->
      <el-col :xs="24" :sm="24" :lg="24">
        <aclapp
          ref="aclappChart"
          :neId="neId"
          :name="relPort"
          :appItem="appItem"
          v-if="chartType === 'aclapp'"
        />
      </el-col>
      <!-- 网元性能监控 -->
      <el-col :xs="24" :sm="24" :lg="24" v-if="info.connectionState === 'CONNECTED'">
        <div class="device device-chart">
          <div class="title">
            <i class="iconfont icon-jiankong" style="color: #fff; background: #16c2c2;"></i> 性能监控数据
          </div>
          <div class="content">
            <el-radio v-model="radio" label="1" @change="selNowCustom">当前</el-radio>
            <el-radio v-model="radio" label="2" @change="selNowCustom">一小时内</el-radio>
            <div class="chart-box">
              <div v-show="radio === '1'" id="per"></div>
              <performance v-show="radio === '2'" ref="customChart" :storage="neType.storage" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <loghistory :lps="lps" :dialogHistory="dialogHistory" @changeHistory="changeHistory($event)" />
    <dpi-top ref="dpiTop" :dialogDpi="dialogDpi" @changeDpi="changeDpi($event)" />
    <lan-top :dialogLan="dialogLan" @changeLan="changeLan($event)" />
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
import dayjs from 'dayjs';
import performance from './performance';
import port from './port';
import lte from './lte';
import tunnel from './tunnel';
import aclapp from './aclapp';
import loghistory from './loghistory';
import dpiTop from './dpi.vue';
import lanTop from './lan.vue';

export default {
  components: {
    performance,
    port,
    lte,
    tunnel,
    aclapp,
    loghistory,
    dpiTop,
    lanTop
  },
  data () {
    return {
      // 设备类型过滤参
      neType: {
        // 软件版本
        software: null,
        // 硬件版本
        hardware: null,
        // 存储占用率
        storage: 45
      },
      // 历史监控参数
      lps: {},
      // 显示历史监控弹出框参数
      dialogHistory: false,
      // 显示应用TOP弹出框
      dialogDpi: false,
      // 显示LAN-TOP弹出框
      dialogLan: false,
      // 网元设备ID
      neId: null,
      // 监控选择
      chartType: null,
      // 端口、隧道、ACL选择
      relPort: null,
      // 设备信息
      info: {
        extAttrs: {
          alarmCounts: {
            Critical: 0,
            Major: 0,
            Minor: 0,
            Warning: 0,
            severityTotal: 0
          },
          links: [],
          acls: []
        }
      },
      // 端口信息
      ptals: [],
      // 端口Tabs默认选中值
      active: '0',
      // 当前 & 自定义选择按钮
      radio: '1',
      // 当前性能参数值
      chart: {
        cpu: 0,
        memory: 0,
        wd: 0
      },
      // 定时器
      timerPer: null,
      // 实时图表
      perChart: null,
      // 实时图表数据
      chartData: [],
      appItem: {},
      dpiList: [
        { id: 1, value: 'office', label: 'office' },
        { id: 2, value: 'baidu', label: '百度' },
        { id: 3, value: 'wechat', label: '微信' },
        { id: 4, value: 'youku', label: '优酷' },
        { id: 5, value: 'qq', label: 'QQ' },
        { id: 6, value: 'zoom', label: 'ZOOM' },
        { id: 7, value: 'douyin', label: '抖音' },
        { id: 8, value: 'bilibili', label: '哔哩哔哩' },
        { id: 9, value: 'jinritoutiao', label: '今日头条' },
        { id: 10, value: 'iqiyi', label: '爱奇艺' },
        { id: 11, value: 'neteasemail', label: '网易邮箱' },
      ],
      deviceList: [
        { id: 'ZXR10_230', name: 'ZXR10_230' },
        { id: 'ZXR10_260', name: 'ZXR10_260' },
        { id: 'ZXWT_ISG1800_2S', name: 'ZXR10_230' },
        { id: 'ZXR10_5800', name: 'ZXR10_5800' },
        { id: 'ZXWT_ISG6800_4E', name: 'ZXWT_ISG6800_4E' },
        { id: 'ZXR10_CG200', name: 'ZXR10_CG200' },
        { id: 'ZXR10_V1000', name: 'VROUTE' },
        { id: 'ZXR10_2800', name: 'ZXR10_2800' },
        { id: 'ZXR10_3800', name: 'ZXR10_3800' },
        { id: 'ZXWT_ISG', name: 'ZXR10_260' },
        { id: 'ZXWT_ISG280', name: 'ZXWT_ISG280' },
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      // 通过路由获取网元ID
      _this.neId = _this.$route.query.id;
      // 端口Tabs默认选中值
      _this.active = '0';
      // 当前 & 自定义选择按钮
      _this.radio = '1';
    });
  },
  watch: {
    // 利用watch方法检测路由变化：
    '$route': function(to, from) {
      this.neId = to.query.id;
      if (to.query.id) {
        this.neId = to.query.id;
        this.chartType = null;
      }
    },
    // 监听网元ID
    neId: {
      immediate: true,
      async handler (val, oldVal) {
        if (val) {
          // 根据网元ID获取设备相关联信息
          await this.getNeInfo();
          this.active = '0';
          this.radio = '1';
          this.chartType = null;
        } else {
          // 无网元ID时，清除定时器请求
          this.clearPerChart();
          this.chartType = null;
        }
        if (oldVal !== val) {
          this.chartType = null;
        }
      }
    }
  },
  // 过滤显示
  filters: {
    // 过滤端口数量
    filtersPort (val, id) {
      let lans = val.extAttrs.site.lans;
      let wans = val.extAttrs.site.wans;
      let port = 0;
      // 判断是否高可用
      if (val.extAttrs.site.ha) {
        // 主要过滤WAN侧
        let nes = val.extAttrs.site.nes;
        let relNe = nes.find(item => {
          return item.neId === Number(id);
        });
        // 判断设备是网关1 || 网关2
        let relWan = [];
        for (let i = 0; i < wans.length; i++) {
          if (relNe) {
            if (wans[i].standByRelation === relNe.standByRelation) {
              relWan.push(wans[i]);
            }
          }
        }
        port = lans.length + relWan.length;
      } else {
        port = lans.length + wans.length;
      }
      return port;
    }
  },
  // 销毁
  beforeDestroy () {
    let _this = this;
    // 执行销毁定时器
    _this.clearPerChart();
  },
  methods: {
    // DPI TOP，回调
    changeDpi (val) {
      let _this = this;
      _this.dialogDpi = val;
    },
    dpiTop () {
      let _this = this;
      _this.$refs.dpiTop.getTop();
      _this.dialogDpi = true;
    },
    // LAN TOP，回调
    changeLan (val) {
      let _this = this;
      _this.dialogLan = val;
    },
    lanTop () {
      let _this = this;
      _this.dialogLan = true;
    },
    // 4G信息获取
    handleClick (tab, event) {
      let _this = this;
      if (event.srcElement.outerText === '4/5G') {
        _this.$http.post({
          url: '/api/sdwan/ne/getEthInfo/' + _this.neId
        }).then(res => {
          let { status, resultBody } = res;
          if (status === '0') {
            // 4G信息
            let obj = resultBody.dataList[0].values;
            for (let i = 0; i < _this.ptals.length; i++) {
              if (_this.ptals[i].type === '4g') {
                _this.ptals[i].band = obj.band;
                _this.ptals[i].imei = obj.imei;
                _this.ptals[i].mode = obj.networkMode;
                _this.ptals[i].rssi = obj.rssi;
                _this.ptals[i].version = obj.version;
              }
            }
          }
        });
      }
    },
    // 历史监控
    logHistorys () {
      let neId = this.info.id;
      // 获取所有隧道
      let links = this.info.extAttrs.links;
      let site = this.info.extAttrs.site;
      // 获取所有WAN
      let wans = site.wans;
      // 获取所有LAN
      let lans = site.lans;
      // 获取关联网元
      let nes = site.nes.find(item => {
        return item.neId === neId;
      });
      let arry = [];
      for (let i = 0; i < wans.length; i++) {
        if (nes.standByRelation === wans[i].standByRelation) {
          arry.push(wans[i]);
        }
      }
      let link = [];
      for (let i = 0; i < links.length; i++) {
        link.push(links[i].extAttrs.tunnelId);
      }
      let port = [];
      for (let i = 0; i < lans.length; i++) {
        port.push(lans[i].name);
      }
      for (let i = 0; i < arry.length; i++) {
        port.push(arry[i].name);
      }
      this.lps = {
        neId,
        name: this.info.userlabel,
        link,
        port
      };
      this.dialogHistory = true;
    },
    // 历史监控，回调
    changeHistory (val) {
      let _this = this;
      _this.dialogHistory = val;
    },
    // 端口监控
    portCharts (val, vlan) {
      let _this = this;
      // 场景一：区分是否为当前图表类型
      if (_this.chartType === 'port') {
        // 场景二：区分是否为为当前统计端口
        if (val === _this.relPort && vlan === _this.relVlan) {
          _this.$message.info('当前统计图表数据为所选端口，请勿重复点击！');
        } else {
          _this.relPort = val;
          _this.relVlan = vlan;
          // 场景三：当前端口为其他端口时，统计Tag标记是否转换为当前
          if (_this.$refs['portChart'].type === '当前') {
            _this.$refs['portChart'].clearPortChart();
            _this.$refs['portChart'].chartInit();
          } else {
            _this.$refs['portChart'].type = '当前';
          }
          _this.$message.success('切换成功！');
        }
      } else {
        _this.chartType = 'port';
        _this.relPort = val;
        _this.relVlan = vlan;
        if (_this.$refs['portChart']) {
          _this.$refs['portChart'].type = '当前';
        }
      }
    },
    // 4G监控
    lteCharts (val) {
      let _this = this;
      // 场景一：区分是否为当前图表类型
      if (_this.chartType === 'lte') {
        // 场景二：区分是否为为当前统计端口
        if (val === _this.relPort) {
          _this.$message.info('当前统计图表数据为所选端口，请勿重复点击！');
        } else {
          _this.relPort = val;
          // 场景三：当前端口为其他端口时，统计Tag标记是否转换为当前
          if (_this.$refs['lteChart'].type === '24小时') {
            _this.$refs['lteChart'].clearPortChart();
            _this.$refs['lteChart'].hoursInit();
          } else {
            _this.$refs['lteChart'].type = '24小时';
          }
          _this.$message.success('切换成功！');
        }
      } else {
        _this.chartType = 'lte';
        _this.relPort = val;
        if (_this.$refs['lteChart']) {
          _this.$refs['lteChart'].type = '24小时';
        }
      }
    },
    // 隧道监控
    tunnelCharts (val) {
      let _this = this;
      // 场景一：区分是否为当前图表类型
      if (_this.chartType === 'tunnel') {
        // 场景二：区分是否为为当前统计隧道
        if (val === _this.relPort) {
          _this.$message.info('当前统计图表数据为所选隧道，请勿重复点击！');
        } else {
          _this.relPort = val;
          // 场景三：当前隧道为其他隧道时，统计Tag标记是否转换为当前
          if (_this.$refs['tunnelChart'].type === '当前') {
            _this.$refs['tunnelChart'].clearPortChart();
            _this.$refs['tunnelChart'].chartInit();
          } else {
            _this.$refs['tunnelChart'].type = '当前';
          }
          _this.$message.success('切换成功！');
        }
      } else {
        _this.chartType = 'tunnel';
        _this.relPort = val;
        if (_this.$refs['tunnelChart']) {
          _this.$refs['tunnelChart'].type = '当前';
        }
      }
    },
    // 应用监控
    appCharts (val, item) {
      let _this = this;
      _this.appItem = item;
      _this.$bus.$emit('appItem', _this.appItem);
      // 场景一：区分是否为当前图表类型
      if (_this.chartType === 'aclapp') {
        // 场景二：区分是否为为当前统计应用
        if (val === _this.relPort) {
          _this.$message.info('当前统计图表数据为所选应用，请勿重复点击！');
        } else {
          _this.relPort = val;
          // 场景三：当前应用为其他应用时，统计Tag标记是否转换为24小时
          if (_this.$refs['aclappChart'].type === '24小时') {
            _this.$refs['aclappChart'].clearPortChart();
            _this.$refs['aclappChart'].hoursInit();
          } else {
            _this.$refs['aclappChart'].type = '24小时';
          }
          _this.$message.success('切换成功！');
        }
      } else {
        _this.chartType = 'aclapp';
        _this.relPort = val;
        if (_this.$refs['aclappChart']) {
          _this.$refs['aclappChart'].type = '24小时';
        }
      }
    },
    // 选择当前 & 自定义
    selNowCustom () {
      let _this = this;
      if (_this.radio !== '1') {
        this.$refs.customChart.chartInit();
      }
    },
    // 清除定时器
    clearPerChart () {
      let _this = this;
      // 清除定时器
      clearInterval(_this.timerPer);
      // 重置实时统计数据
      _this.chartData = [];
    },
    // 图表初始化
    async chartInit () {
      let _this = this;
      _this.clearPerChart();
      // 判断是否已存在图表对象
      if (_this.perChart !== null) {
        _this.perChart.destroy();
      }
      // 创建图表
      _this.perChart = new Chart({
        container: 'per',
        autoFit: true,
        height: 400
      });
      // X轴显示格式
      _this.perChart.scale('year', {
        type: 'time',
        mask: 'YYYY-MM-DD HH:mm:ss'
      });
      _this.perChart.axis('year', {
        label: {
          formatter: (text, item, index) => {
            text = text.substr(11, text.length);
            return text;
          }
        }
      });
      // Y轴参数设置
      _this.perChart.scale('value', {
        nice: true,
        min: 0,
        max: 150
      });
      // 图表提示框设置
      _this.perChart.tooltip({
        showCrosshairs: true,
        shared: true,
        customItems: (items) => {
          items.map(ind => {
            if (ind.name === 'Temperature') {
              ind.value = ind.value + '℃';
            } else {
              ind.value = ind.value + '%';
            }
          });
          return items;
        },
      });
      // 显示文字色值
      _this.perChart.line().position('year*value').color('country');
      // 图表初始值
      await _this.$http.post({
        url: '/api/resource/nemng/command/' + this.neId,
        data: {
          commandCode: 'pm.router.current.get',
          paras: {
            poId: '002'
          }
        }
      }).then(res => {
        let { dataList } = res;
        // eslint-disable-next-line guard-for-in
        for (let key in dataList[0].values) {
          if (key === '002_001') {
            _this.chartData.push({
              country: 'CPU',
              year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              value: dataList[0].values[key]
            });
            _this.chart.cpu = dataList[0].values[key];
          }
          if (key === '002_002') {
            _this.chartData.push({
              country: 'Memory',
              year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              value: dataList[0].values[key]
            });
            _this.chart.memory = dataList[0].values[key];
          }
          if (key === '002_003') {
            _this.chartData.push({
              country: 'Temperature',
              year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              value: dataList[0].values[key] - 15
            });
            _this.chart.wd = dataList[0].values[key] - 15;
          }
          _this.chartData.push({
            country: 'Storage',
            year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            value: _this.neType.storage
          });
        }
        _this.perChart.data(_this.chartData);
      }).catch(err => {
        _this.chart = {
          cpu: 0,
          memory: 0,
          wd: 0
        };
      });
      _this.perChart.render();
      // 开始定时器请求
      _this.timerPer = setInterval(() => {
        _this.$http.post({
          url: '/api/resource/nemng/command/' + this.neId,
          data: {
            commandCode: 'pm.router.current.get',
            paras: {
              poId: '002'
            }
          },
          loading: false
        }).then(res => {
          let { dataList } = res;
          // eslint-disable-next-line guard-for-in
          for (let key in dataList[0].values) {
            if (key === '002_001') {
              _this.chartData.push({
                country: 'CPU',
                year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                value: dataList[0].values[key]
              });
              _this.chart.cpu = dataList[0].values[key];
            }
            if (key === '002_002') {
              _this.chartData.push({
                country: 'Memory',
                year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                value: dataList[0].values[key]
              });
              _this.chart.memory = dataList[0].values[key];
            }
            if (key === '002_003') {
              _this.chartData.push({
                country: 'Temperature',
                year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                value: dataList[0].values[key] - 15
              });
              _this.chart.wd = dataList[0].values[key] - 15;
            }
            _this.chartData.push({
              country: 'Storage',
              year: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              value: _this.neType.storage
            });
          }
          // 实时更新图表显示
          _this.perChart.changeData(_this.chartData);
        }).catch(err => {
          // 执行销毁
          _this.clearPerChart();
        });
      }, 5000);
    },
    // 查询网元关联信息 - 网元、站点、端口、隧道、ACL应用
    async getNeInfo () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/ne/queryNeById/' + _this.neId
      }).then(async (res) => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.info = resultBody;
          await this.filterPortTunnelApp();
          await this.filterType(resultBody.type);
          // 判断设备是否断链，断链则不请求实时性能参数
          if (_this.info.managementState === 'ONLINE' && _this.info.connectionState === 'CONNECTED') {
            await this.chartInit();
          }
        }
      });
    },
    // 过滤设备类型
    async filterType (type) {
      let _this = this;
      for (let i = 0; i < _this.deviceList.length; i++) {
        if (type === _this.deviceList[i].id) {
          if (_this.deviceList[i].name === 'ZXR10_230') {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: 'AFMPFUD',
              // 存储占用率
              storage: 43
            };
            return;
          }
          if (_this.deviceList[i].name === 'ZXR10_260') {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: 'AFMPFUC',
              // 存储占用率
              storage: 44
            };
            return;
          }
          if (_this.deviceList[i].name === 'ZXR10_280') {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: 'AFMPFUE',
              // 存储占用率
              storage: 42
            };
            return;
          }
          if (_this.deviceList[i].name === 'ZXWT_ISG6800_4E') {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: 'AXMPUA',
              // 存储占用率
              storage: 48
            };
            return;
          }
          if (_this.deviceList[i].name === 'VROUTE') {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: 'MP_V22.4.17',
              // 存储占用率
              storage: 45
            };
          } else {
            _this.neType = {
              // 软件版本
              software: 'V6.00.10',
              // 硬件版本
              hardware: '-',
              // 存储占用率
              storage: 45
            };
          }
        }
      }
    },
    // 过滤数据排列 端口、隧道、ACL应用
    async filterPortTunnelApp () {
      let _this = this;
      let lan = ['lan', _this.info.extAttrs.siteId !== undefined && _this.info.extAttrs.siteId !== -1 ? _this.info.extAttrs.site.lans : []];
      let wan = ['wan', _this.info.extAttrs.siteId !== undefined && _this.info.extAttrs.siteId !== -1 ? _this.info.extAttrs.site.wans : []];
      let tunnel = ['tunnel', _this.info.extAttrs.links];
      let acl = ['app', _this.info.extAttrs.acls];
      let portStatus = _this.info.extAttrs.siteId !== undefined && _this.info.extAttrs.siteId !== -1 ? _this.info.extAttrs.site.extAttrs.portStatus : {};
      // 主要过滤WAN侧
      let nes = _this.info.extAttrs.site.nes;
      let relNe = nes.find(item => {
        return item.neId === Number(this.neId);
      });
      // 判断是否高可用
      if (_this.info.extAttrs.site.ha) {
        let wans = _this.info.extAttrs.site.wans;
        // 判断设备是网关1 || 网关2
        let relWan = [];
        for (let i = 0; i < wans.length; i++) {
          if (relNe) {
            if (wans[i].standByRelation === relNe.standByRelation) {
              relWan.push(wans[i]);
            }
          }
        }
        wan = ['wan', relWan];
      }
      let result = [];
      let arry = [lan, wan, tunnel, acl];
      // eslint-disable-next-line no-sequences
      // eslint-disable-next-line complexity
      arry.forEach((item, i) => {
        if (item[0] === 'lan') {
          for (let j = 0; j < item[1].length; j++) {
            result.push({
              label: item[1][j].alias,
              // 端口类型
              type: item[1][j].lanType === 'LAN' ? 'lan' : 'wifi',
              // 名称
              name: item[1][j].alias,
              // 原始值
              value: item[1][j].name,
              // 状态
              status: portStatus[item[1][j].name] === undefined ? true : portStatus[item[1][j].name],
              // 开启vlan
              vlanOpera: item[1][j].vlanOpera ? '开启' : '关闭',
              // vlan值
              vlan: item[1][j].vlan,
              // selNeCode
              code: relNe.standByRelation,
              // 网关1/掩码
              oneGatewayIp: item[1][j].oneGatewayIp,
              // 网关1优先级
              oneGatewayPriority: item[1][j].oneGatewayPriority,
              // 网关2/掩码
              twoGatewayIp: item[1][j].twoGatewayIp,
              // 网关2/优先级
              twoGatewayPriority: item[1][j].twoGatewayPriority,
              // 开启DHCP
              enableDhcp: item[1][j].enableDhcp ? '开启' : '关闭',
              // 地址池
              ipPoolFrom: item[1][j].ipPoolFrom,
              // 地址池
              ipPoolTo: item[1][j].ipPoolTo,
              // 主DNS
              primaryDns: item[1][j].primaryDns,
              // 备DNS
              backupDns: item[1][j].backupDns
            });
          }
        }
        if (item[0] === 'wan') {
          for (let j = 0; j < item[1].length; j++) {
            if (item[1][j].wanType === 'ETHERIC') {
              result.push({
                label: item[1][j].alias,
                // 端口类型
                type: 'wan',
                // 名称
                name: item[1][j].alias,
                // 原始值
                value: item[1][j].name,
                // 端口状态
                status: portStatus[item[1][j].name] === undefined ? true : portStatus[item[1][j].name],
                // 线路类型
                lineType: item[1][j].lineType,
                // 带宽
                bandWidth: item[1][j].upbandWidth,
                // 运营商
                netOperator: this.filterNet(item[1][j].netOperator),
                // 优先级
                priority: item[1][j].priority,
                // 获取方式
                addressAcquisition: item[1][j].addressAcquisition,
                // 地址/掩码
                ip: item[1][j].ip,
                // 网关地址
                gatewayIp: item[1][j].gatewayIp,
                // 用户名
                userName: item[1][j].userName,
                // 密码
                password: item[1][j].password
              });
            }
            if (item[1][j].wanType === 'LTE') {
              result.push({
                label: item[1][j].alias,
                // 端口类型
                type: '4g',
                // 名称
                name: item[1][j].alias,
                // 原始值
                value: item[1][j].name,
                // 端口状态
                status: portStatus[item[1][j].name] === undefined ? true : portStatus[item[1][j].name],
                // 线路类型
                lineType: item[1][j].lineType,
                // 运营商
                netOperator: this.filterNet(item[1][j].netOperator),
                // 优先级
                priority: item[1][j].priority,
                // 获取方式
                addressAcquisition: item[1][j].addressAcquisition,
                // 基带版本
                version: _this.info.extAttrs['4GInfo'] ? _this.info.extAttrs['4GInfo'].dataList[0].values.version : '-',
                // 设备标识
                imei: _this.info.extAttrs['4GInfo'] ? _this.info.extAttrs['4GInfo'].dataList[0].values.imei : '-',
                // 网络制式
                mode: _this.info.extAttrs['4GInfo'] ? _this.info.extAttrs['4GInfo'].dataList[0].values.networkMode : '-',
                // 网络频段
                band: _this.info.extAttrs['4GInfo'] ? _this.info.extAttrs['4GInfo'].dataList[0].values.band : '-',
                // 信息强度
                rssi: _this.info.extAttrs['4GInfo'] ? _this.info.extAttrs['4GInfo'].dataList[0].values.rssi : '-'
              });
            }
          }
        }
        if (item[0] === 'tunnel') {
          for (let j = 0; j < item[1].length; j++) {
            result.push({
              tunnelId: item[1][j].extAttrs.tunnelId,
              label: '隧道' + (j + 1),
              // 类型
              type: 'tunnel',
              // 名称
              name: item[1][j].userlabel,
              // 状态
              status: item[1][j].extAttrs.status,
              // 隧道类型
              tunnelType: item[1][j].tunnelType,
              // 优先级
              priority: item[1][j].extAttrs.priority,
              // 限速
              rateLimit: item[1][j].rateLimit,
              // 设备
              ne: item[1][j].extAttrs.startNeName + ' - ' + item[1][j].extAttrs.endNeName,
              // 端口
              port: item[1][j].startWan + ' - ' + item[1][j].endWan,
              // 监控
              enableSqa: item[1][j].enableSqa
            });
          }
        }
        if (item[0] === 'app') {
          for (let j = 0; j < item[1].length; j++) {
            if (item[1][j].applicationType === 'Acl') {
              result.push({
                label: '应用' + (j + 1),
                id: item[1][j].monitorRuleId,
                // 类型
                type: 'app',
                // 名称
                name: item[1][j].displayName,
                // 状态
                status: item[1][j].log ? '开启日志' : '关闭日志',
                // 类型
                appType: item[1][j].props.ipProtocol.type,
                // 源端IP
                sourceIp: item[1][j].props.source.anyIp ? '任意IP' : item[1][j].props.source.ip,
                // 源端端口
                sourcePort: item[1][j].props.source.portFrom === -1 ? '任意端口' : item[1][j].props.source.portFrom + '-' + item[1][j].props.source.portTo,
                // 目的IP
                destIp: item[1][j].props.dest.anyIp ? '任意IP' : item[1][j].props.dest.ip,
                // 目的端口
                destPort: item[1][j].props.dest.portTo === -1 ? '任意端口' : item[1][j].props.dest.portFrom + '-' + item[1][j].props.dest.portTo
              });
            } else {
              result.push({
                label: '应用' + (j + 1),
                id: item[1][j].dpiId,
                // 类型
                type: 'app',
                // 名称
                name: item[1][j].displayName,
                // 状态
                status: item[1][j].log ? '开启日志' : '关闭日志',
                // 类型
                appType: _this.filterDpi(item[1][j].dpiId),
                // 源端IP
                sourceIp: '-',
                // 源端端口
                sourcePort: '-',
                // 目的IP
                destIp: '-',
                // 目的端口
                destPort: '-'
              });
            }

          }
        }
      });
      _this.ptals = result;
    },
    // 过滤运营商
    filterNet (val) {
      switch (val) {
        case 'MOBILE':
          val = '移动';
          break;
        case 'UNICOM':
          val = '联通';
          break;
        case 'TELECOM':
          val = '电信';
          break;
        default:
          val = '其他';
      }
      return val;
    },
    // 返回dpi名称
    filterDpi (val) {
      if (val === 0) {
        return '-';
      } else {
        let o = this.dpiList.find(item => item.id === val);
        if (o) {
          return o.label;
        } else {
          return '-';
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.device {
  width: 100%;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
  margin-bottom: 20px;
  .title {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    font-size: 15px;
    i {
      border-radius: 50%;
      padding: 3px;
      margin-left: 10px;
    }
  }
}
.device-info {
  .content {
    padding: 8.5px 0;
    table {
      width: 100%;
      tr {
        display: block;
        float: left;
        width: calc(100% - 140px);
        margin-bottom: 3px;
        td {
          text-align: center;
          color: #666;
          font-size: 14px;
          line-height: 28px;
          &:first-child {
            width: 80px;
            background: #f8f8f9;
          }
          &:last-child {
            width: calc(100% - 80px);
            padding: 0 10px;
          }
        }
        &:first-child {
          display: inline-block;
          width: 140px;
          height: 168px;
          margin-bottom: 0;
          td {
            background: transparent;
            img {
              width: 100px;
              padding: 20px 10px;
              padding-bottom: 0;
            }
            span {
              display: block;
              width: 100%;
              text-align: center;
              i {
                position: relative;
                display: inline-block;
                border-radius: 50%;
                width: 10px;
                height: 10px;
                top: 0;
                left: -10px;
                &.i-success {
                  background: #19be6b;
                }
                &.i-error {
                  background: #ed4014;
                }
                &.i-warning {
                  background: #f90;
                }
                @keyframes scale {
                  0% {
                    transform: scale(1.1);
                  }
                  50%,
                  75% {
                    transform: scale(1.3);
                  }
                  78%,
                  100% {
                    opacity: 0;
                  }
                }
                @keyframes scales {
                  0% {
                    transform: scale(1.1);
                  }
                  50%,
                  75% {
                    transform: scale(1.5);
                  }
                  78%,
                  100% {
                    opacity: 0;
                  }
                }
              }
              i::before {
                position: absolute;
                top: -1px;
                left: -1px;
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                opacity: 0.6;
                animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
              }
              .i-success::before {
                background: #19be6b;
              }
              .i-error::before {
                background: #ed4014;
              }
              .i-warning::before {
                background: #f90;
              }
            }
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
.device-performance {
  ul {
    width: 100%;
    height: 200px;
    li {
      display: block;
      float: left;
      width: 33.333%;
      &:last-child::after {
        content: "";
        overflow: hidden;
        clear: both;
      }
      i {
        display: block;
        float: left;
        font-size: 40px;
        color: #666;
        margin: 30px 15px;
      }
      label {
        display: block;
        float: left;
        font-size: 14px;
        line-height: 28px;
        width: calc(100% - 70px);
        text-align: center;
        &::after {
          content: "";
          overflow: hidden;
          clear: both;
        }
      }
      span {
        display: block;
        float: left;
        width: calc(100% - 70px);
        text-align: center;
        font-size: 16px;
        margin-top: 30px;
      }
    }
  }
}
.device-alarm {
  ul {
    width: 100%;
    height: 200px;
    li {
      display: block;
      float: left;
      width: 50%;
      &:last-child::after {
        content: "";
        overflow: hidden;
        clear: both;
      }
      i {
        position: relative;
        display: inline-block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 0;
        left: -5px;
        &.i-yz {
          background: #de4040;
        }
        &.i-zy {
          background: #de8f40;
        }
        &.i-cy {
          background: #e9d426;
        }
        &.i-jg {
          background: #86bcdb;
        }
        @keyframes scale {
          0% {
            transform: scale(1.1);
          }
          50%,
          75% {
            transform: scale(1.3);
          }
          78%,
          100% {
            opacity: 0;
          }
        }
        @keyframes scales {
          0% {
            transform: scale(1.1);
          }
          50%,
          75% {
            transform: scale(1.5);
          }
          78%,
          100% {
            opacity: 0;
          }
        }
      }
      i::before {
        position: absolute;
        top: -1px;
        left: -1px;
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        opacity: 0.6;
        animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
      }
      .i-yz::before {
        background: #de4040;
      }
      .i-zy::before {
        background: #de8f40;
      }
      .i-cy::before {
        background: #e9d426;
      }
      .i-jg::before {
        background: #86bcdb;
      }
      label {
        display: block;
        float: left;
        font-size: 14px;
        line-height: 28px;
        width: 100%;
        text-align: center;
        margin: 15px auto;
        &::after {
          content: "";
          overflow: hidden;
          clear: both;
        }
      }
      span {
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        font-size: 20px;
        margin-top: 20px;
      }
    }
  }
}
.device-site {
  .content {
    padding: 10px;
    ul {
      width: 100%;
      li {
        margin-bottom: 10px;
        label {
          display: inline-block;
          text-align: center;
          color: #333;
          font-size: 14px;
          line-height: 32px;
          width: 80px;
          background: #f8f8f9;
        }
        span {
          display: inline-table;
          font-size: 14px;
          line-height: 32px;
          color: #333;
          width: calc(100% - 105px);
          padding: 0 10px;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
.device-port {
  ::v-deep .el-tabs__item {
    text-align: center;
    span {
      i {
        font-size: 18px;
      }
      label {
        display: inline-block;
        width: 80px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  ::v-deep .el-tabs__nav {
    border: 0;
  }
  .content {
    ul {
      width: 100%;
      li {
        margin-bottom: 10px;
        label {
          display: inline-block;
          text-align: center;
          color: #333;
          font-size: 14px;
          line-height: 32px;
          width: 150px;
          background: #f8f8f9;
        }
        span {
          display: inline-table;
          font-size: 14px;
          line-height: 32px;
          color: #333;
          width: calc(100% - 200px);
          padding: 0 10px;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .port-info {
      padding: 15px;
      padding-top: 0;
      font-size: 14px;
      line-height: 32px;
      color: #333;
      i {
        cursor: pointer;
        color: #409eff;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
.device-chart {
  .content {
    height: 450px;
    padding: 15px;
    .chart-box {
      padding-top: 20px;
    }
  }
}
</style>